<template>
  <div class="box-yuyi">
    <div class="box-left" v-loading="treeLoading">
      <avue-tree :option="treeOption"
                 :data="treeData"
                 @node-click="nodeClick">
        <div class="custom-tree-node show-hide" slot-scope="{ node, data }">
              <span onselectstart="return false">
                <i :class="data.icon"/> {{ data.name }}
              </span>
        </div>
      </avue-tree>
    </div>

    <section class="box-content">
      <el-row :gutter="12">
        <el-col :span="8" v-loading="metaLoading">
          <avue-tree :option="metadataOption"
                     :data="metadata">
            <div class="custom-tree-node show-hide" slot-scope="{ node, data }">
              <span onselectstart="return false">
                <i :class="data.icon"/> {{ data.mdName }}
              </span>
              <span class="tree-btn">
                <el-button
                  type="text"
                  size="small"
                  class="btn"
                  @click.stop="() => handleAddItem(data)">
                  <i class="el-icon-plus"></i>
                </el-button>
              </span>
            </div>
          </avue-tree>
        </el-col>
        <el-col :span="16">
          <div class="fun-btn">
            <div class="rules">
              <div v-if="tableData.length>0">
                <label>路径存储规则：</label>
                <span v-for="(item, index) in tableData"
                      :key="index">
                {{item.mdName}}:{{item.coveringLength}}{{item.symbol}}
              </span>
              </div>
            </div>
            <el-button size="small"
                       type="primary"
                       @click="handleSave"
                       :loading="saveLoading"
                       icon="el-icon-circle-plus-outline">保存
            </el-button>
          </div>

          <avue-crud :option="option"
                     :table-loading="loading"
                     :data="tableData"
                     :page.sync="page"
                     ref="crud"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     @row-del="handleDel"
          >
            <template slot="coveringLength" slot-scope="{row}">
              <el-input-number v-model="row.coveringLength" :precision="0"></el-input-number>
            </template>
            <template slot="symbol" slot-scope="{row}">
              <el-input v-model="row.symbol"></el-input>
            </template>
          </avue-crud>
        </el-col>
      </el-row>

    </section>
  </div>
</template>

<script>
import { getEntityCategoryList } from '../../../../../api/category/category'
import {
  addSavePathList,
  getSavePathList
} from '../../../../../api/transferReceiveSet/savePath'

export default {
  name: 'savePath', // 存储路径管理
  // 菜单设置（下级菜单）
  props: {
    treeLoading: {
      type: Boolean,
      default: true
    },
    treeData: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      treeOption: {
        addBtn: false,
        defaultExpandAll: true,
        // accordion: true, // 只展开一层
        props: {
          labelText: '标题',
          label: 'name',
          value: 'id',
          children: 'children'
        }
      },
      metadataOption: {
        addBtn: false,
        defaultExpandAll: true,
        // accordion: true, // 只展开一层
        props: {
          labelText: '标题',
          label: 'mdName',
          value: 'mdCode',
          children: 'children'
        }
      },
      metaLoading: false,
      idCategory: '',
      idTable: '',
      loading: false,
      page: {
        pageSize: 20,
        currentPage: 1,
        pageSizes: [20, 40, 60, 80],
        total: 0
      },
      tableData: [],
      metadata: [], // 元数据
      saveLoading: false
    }
  },
  computed: {
    option () {
      return {
        align: 'left',
        menuAlign: 'center',
        header: false,
        border: true,
        size: 'medium',
        height: 'calc(100vh - 225px)',
        index: true, // 显示序号
        indexLabel: '序号', // 显示序号
        selection: false, // 多选
        editBtn: false, // 行内编辑按钮
        delBtn: true, // 行内删除按钮
        viewBtn: false, // 行内查看按钮
        menuWidth: 100,
        column: [
          {
            label: '元数据名',
            prop: 'mdName',
            overHidden: true,
            minWidth: 150,
            sortable: true
          },
          {
            label: '编码',
            prop: 'mdCode',
            overHidden: true,
            minWidth: 150,
            sortable: true
          },
          {
            label: '长度',
            prop: 'coveringLength',
            minWidth: 180,
            solt: true
          },
          {
            label: '符号',
            prop: 'symbol',
            solt: true,
            width: 100
          }
        ]
      }
    }
  },
  methods: {
    onLoad () {
      // 加载列表
      this.loading = true
      const query = {
        pageSize: this.page.pageSize,
        pageNo: this.page.currentPage,
        params: [{
          name: 'idCategory',
          op: 'eq',
          value: this.idCategory
        }, {
          name: 'idTable',
          op: 'eq',
          value: this.idTable
        }]
      }
      getSavePathList(query).then(res => {
        this.tableData = res.data.data.list
        this.page.total = res.data.data.total
        this.loading = false
      })
    },
    handleCurrentChange (currentPage) {
      // 翻页 第几页
      this.page.currentPage = currentPage
      this.onLoad()
    },
    handleSizeChange (pageSize) {
      // 翻页 一页多少条
      this.page.pageSize = pageSize
      this.onLoad()
    },
    nodeClick (data) {
      // 选择tree节点
      this.idCategory = data.idCategory
      this.idTable = data.table && data.table.length > 0 ? data.table[0].idTable : ''
      this.getElementData()
      this.onLoad()
    },
    getElementData () {
      this.metaLoading = true
      const param = {
        pageNo: 1,
        pageSize: 1000,
        params: [{
          name: 'idTable',
          op: 'eq',
          value: this.idTable
        }]
      }
      getEntityCategoryList(param).then(res => {
        this.metadata = res.data.data.list
        this.metaLoading = false
      }).catch(() => {
        this.metaLoading = false
      })
    },
    handleAddItem (data) {
      // 添加item
      const item = {
        coveringLength: 0,
        mdCode: data.mdCode,
        mdName: data.mdName,
        orderNo: 0,
        remark: '',
        symbol: '/'
      }
      this.tableData.push(item)
    },
    handleSave () {
      // 保存
      const query = {
        idCategory: this.idCategory,
        idTable: this.idTable
      }
      this.saveLoading = true
      addSavePathList(query, this.tableData).then(res => {
        this.$message.success('操作成功')
        this.saveLoading = false
      }).catch(() => {
        this.saveLoading = false
      })
    },
    handleDel (row, index) {
      // 删除
      this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1)
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .box-yuyi {

    .box-left, .box-content {
      height: calc(100vh - 155px);
    }

    ::v-deep .avue-tree {
      height: calc(100vh - 160px);
    }

    ::v-deep .el-tree-node__content {
      &:hover {
        .tree-btn {
          display: inline-block;
        }
      }
    }

    .tree-btn {
      margin-left: 20px;
      /*display: none;*/

      .btn:hover {
        opacity: 0.8;
      }
    }

    .box-content {
      hgroup.title {
        color: #000;
        padding: 5px 0 10px 0;
      }

      ::v-deep .search-btn {
        margin-top: 0px;
      }

      .reset {
        margin-top: 5px;
      }
    }

    .fun-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 10px;

      .rules {
        max-width: calc(100% - 100px);
        overflow: hidden;
      }
    }
  }
</style>
